<template>
	<div class="main">
		<div class="head">
			<i class="iconfont iconfanhui" @click="backCenter"></i>
			<div class="user">
				<user></user>
			</div>
		</div>
		<div class="center">
			<div class="top">
				<div class="userhead">
					<img :src="$store.state.baseHttp+userdata.userCoverPath" alt="">
				</div>
				<div class="usermessage">
					<span class="usreName">{{userdata.userName}}</span>
					<p class="userCount">
						<span>获赞 123</span>
						<span>关注 123</span>
						<span>粉丝 123</span>
					</p>
				</div>
			</div>
			<div class="nva">
				<span :class="{action:isactive == 'analysisHabit'}" @click="jumpTo('analysisHabit')">Ta的习惯</span>
				<span :class="{action:isactive == 'meCollection'}" @click="jumpTo('meCollection')">Ta的收藏</span>
				<span :class="{action:isactive == 'meShare'}" @click="jumpTo('meShare')">Ta的分享</span>
			</div>
			<div class="centant">
				<transition name="slide-right">
					<router-view></router-view>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
	import user from '../../public/User.vue'
	export default{
		data(){
			return{
				isactive:'analysisHabit',
				userdata:{},
			}
		},
		created() {
			this.getUserData()
		},
		activated() {
			this.getUserData()
		},
		components:{
			user
		},
		methods:{
			//导航跳转
			jumpTo(url){
				this.$router.push(url)
				this.isactive = url
			},
			//获取用户数数据
			getUserData(){
				this.$http.get('/api/user?userId='+this.$store.state.toUserId).then(res=>{
					console.log(res.data)
					this.userdata = res.data
				})
			},
			backCenter(){
				this.$router.back()
			}
		}
	}
</script>

<style scoped="scoped">
	.iconfanhui{
		font-size: 35px;
		position: absolute;
		left: 15px;
		top: 10px;
		cursor: pointer;
	}
	.main{
		background-color:#dbeef4 ;
	}
	.head{
		position: relative;
		height: 60px;
		width: 100%;
		background: url(../../../assets/pngImg/head2@2x.png);
		background-size: auto 62px;
	}
	.user{
		position: absolute;
		right: 0;
		top: 0;
	}
	.center{
		width: 1300px;
		height: 100%;
		margin: 0 auto;
		background-color: #edf7fa;
		box-sizing: border-box;
		padding: 0 40px;
	}
	.top{
		border-bottom: #dbeef4 4px solid;
		height: 120px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.userhead{
		float: left;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		border: #dbeef4 solid 3px;
		margin-top: 8px;
		box-sizing: border-box;
	}
	.userhead img{
		width: 100px;
		height: 100px;
		object-fit: cover;
	}
	.usermessage{
		float: left;
		height: 100%;
		width: 300px;
		margin-left: 30px;
	}
	.usreName{
		display: inline-block;
		margin-top: 20px;
		font-size: 24px;
	}
	.userCount{
		margin-top: 15px;
		font-size: 18px;
	}
	.userCount span{
		margin-right: 20px;
	}
	.nva{
		width: 100%;
		height: 40px;
		display: flex;
		line-height: 40px;
		text-align: center;
		font-size: 24px;
		color: #cbe2ff;
		border: 2px ;
	}
	.nva span{
		position: relative;
		flex:1;
		cursor: pointer;
	}
	.action{
		color: #729bcd !important;
		background-color: #f6fbfd;
		width: 100%;
		height: 100%;
		border-radius: 0 0 5px 5px ;
	}
	.centant{
		position: relative;
		height: 70%;
		width: 100%;
	}
</style>
